<template>
  <div class="car">
    <mt-header fixed title="购物车"></mt-header>
    <table>
      <tr>
        <td width="10%">id</td>
        <td width="20%">名称</td>
        <td width="20%">价格</td>
        <td width="30%">数量</td>
        <td width="20%">操作</td>
      </tr>
      <tr v-if="arr.length==0">
        <td colspan="5">购物车很空</td>
      </tr>
      <tr v-for="(item,index) in arr">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.price}}</td>
        <td>
          <button @click="reduceNum(index)">-</button>
          <input v-model="item.num" type="text">
          <button @click="addNum(index)">+</button>
        </td>
        <td>
          <mt-button @click="deleteGoods(index)" size="small" type="danger">删除</mt-button>
        </td>
      </tr>
      <tr>
        <td colspan="5">总计：{{totalMoney}}</td>
      </tr>
    </table>
  </div>
  <!-- <div class="car">
        <mt-header fixed title="购物车"></mt-header>
        <table>
            <tr>
                <td width="10%">id</td>
                <td width="20%">名称</td>
                <td width="20%">价格</td>
                <td width="30%">数量</td>
                <td width="20%">操作</td>
            </tr>
            <tr v-if="!arr.length">
                <td colspan="5">购物车很空</td>
            </tr>
            <tr v-for="(item,index) in arr" v-else>
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
                <td>
                    <button @click="reduceNum(index)">-</button>
                    <input v-model="item.num" type="text" name="">
                    <button @click="addNum(index)">+</button>
                </td>
                <td><mt-button @click="deleteGoods(index)" size="small" type="danger">删除</mt-button></td>
            </tr>
            <tr>
                <td colspan="5">总计：<span>{{totalMoney}}</span></td>
            </tr>
        </table>
  </div>-->
</template>
<style scoped>
.car table {
  width: 100%;
  border-collapse: collapse;
}
.car table tr td {
  border: 1px solid #dcdcdc;
  height: 40px;
}
.car table tr td input {
  width: 30px;
  text-align: center;
}
</style>
<script>
import { mapMutations, mapState, mapGetters, mapActions } from "vuex";
export default {
  name: "car",
  data() {
    return {};
  },
  computed: {
    // ...mapState({
    //   arr: "module1/arr"
    // }),
    ...mapState("module1", {
      arr: "arr"
    }),
    // 使用mapState比较简洁，或者也可以如下
    /**
     * arr: this.$store.state.arr
     * 
     */
    ...mapGetters("module1", {
      totalMoney: "totalMoney"
    })
  },
  methods: {
    // ...mapMutations("module1", {
    //   reduceNum: "reduceNum",
    //   addNum: "addNum",
    //   deleteGoods: "deleteGoods"
    // }),
    ...mapActions("module1", { // 可以这样，也可以像下面那样单独申明一个reduceNum执行，但是比较麻烦
    //   reduceNum: "reduceNum",
      addNum: "addNum",
      deleteGoods: "deleteGoods"
    }),
    reduceNum(index) {
      this.$store.dispatch("module1/reduceNum", index);
    }
  }
};
// import {mapState,mapActions,mapGetters} from 'vuex'
// export default{
//     name:"Car",
//     data(){
//         return {
//         }
//     },
//     methods:{
//         ...mapActions(['addNum','reduceNum','deleteGoods'])
//     },
//     computed:{
//        ...mapGetters(['totalMoney']),
//        ...mapState(['arr'])
//     }
// }
</script>